﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<style type="text/css">
.tile {
    cursor: pointer;
    background-size: cover;
    margin: 1px;
    position: relative;
    overflow: hidden;
    float: left;
    -webkit-animation: tileAnimation 700ms ease;
    -moz-animation: tileAnimation 700ms ease;
    -ms-animation: tileAnimation 700ms ease;
    animation: tileAnimation 700ms ease;
}
@-webkit-keyframes tileAnimation {
    0% {
        opacity: 0;
        -webkit-transform: translate(1000px);
        /*-webkit-transform: scale(0);*/
    }
    50% {
        opacity: 1;
        -webkit-transform: translate(-40px);
        /*-webkit-transform: scale(1.2);*/
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0px);
        /*-webkit-transform: scale(1);*/
    }
}
@-moz-keyframes tileAnimation {
    0% {
        opacity: 0;
        -moz-transform: translate(1000px);
        /*-webkit-transform: scale(0);*/
    }
    50% {
        opacity: 1;
        -moz-transform: translate(-40px);
        /*-webkit-transform: scale(1.2);*/
    }
    100% {
        opacity: 1;
        -moz-transform: translate(0px);
        /*-webkit-transform: scale(1);*/
    }
}
@-ms-keyframes tileAnimation {
    0% {
        opacity: 0;
        -ms-transform: translate(1000px);
        /*-webkit-transform: scale(0);*/
    }
    50% {
        opacity: 1;
        -ms-transform: translate(-40px);
        /*-webkit-transform: scale(1.2);*/
    }
    100% {
        opacity: 1;
        -ms-transform: translate(0px);
        /*-webkit-transform: scale(1);*/
    }
}
@-o-keyframes tileAnimation {
    0% {
        opacity: 0;
        -o-transform: translate(1000px);
        /*-webkit-transform: scale(0);*/
    }
    50% {
        opacity: 1;
        -o-transform: translate(-40px);
        /*-webkit-transform: scale(1.2);*/
    }
    100% {
        opacity: 1;
        -o-transform: translate(0px);
        /*-webkit-transform: scale(1);*/
    }
}
@keyframes tileAnimation {
    0% {
        opacity: 0;
        transform: translate(1000px);
        /*-webkit-transform: scale(0);*/
    }
    50% {
        opacity: 1;
        transform: translate(-40px);
        /*-webkit-transform: scale(1.2);*/
    }
    100% {
        opacity: 1;
        transform: translate(0px);
        /*-webkit-transform: scale(1);*/
    }
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.7) 100%);
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
.tile:hover > .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.tile:hover > .textWraper > .title {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    padding: 5px;
    -webkit-transform: rotateZ(6deg);
    -moz-transform: rotateZ(6deg);
    -ms-transform: rotateZ(6deg);
    transform: rotateZ(6deg);
}
.tile:hover > .textWraper > .subtitle {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: rotateZ(-2deg);
    -moz-transform: rotateZ(-2deg);
    -ms-transform: rotateZ(-2deg);
    transform: rotateZ(-2deg);
}
.tile:hover > .textWraper > .content {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 1;
}
.tile:hover > .textWraper {
    bottom: 70px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.tile:hover > .footer {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    bottom: 0px;
}
.tile:hover > .footer > img:last-child {
    opacity: 1;
}
.tile:hover > .like {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    right: 0px;
    top: 10px;
    -webkit-transform: rotateZ(-20deg);
    -moz-transform: rotateZ(-20deg);
    -ms-transform: rotateZ(-20deg);
    transform: rotateZ(-20deg);
}
.title {
    width: auto;
    height: auto;
    color: white;
    font-family: Calibri;
    font-size: 1em;
    font-weight: 900;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    display: block;
    float: left;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.subtitle {
    width: 100%;
    height: auto;
    color: white;
    font-family: Dotum;
    font-size: 2.2em;
    line-height: 0.9em;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.content {
    width: 100%;
    height: auto;
    color: white;
    font-family: Calibri;
    font-size: 0.9em;
    font-weight: 100;
    word-wrap: break-word;
    text-align: justify;
    position: relative;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.textWraper {
    width: calc(100% - 40px);
    height: auto;
    position: absolute;
    bottom: -10px;
    left: 20px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.footer {
    width: 100%;
    height: 50px;
    position: absolute;
    float: left;
    bottom: -51px;
    border-top: dashed 1px white;
    opacity: 1.9;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    transition: all 200ms ease;
}
.author {
    color: white;
    font-family: Calibri;
    font-size: 0.9em;
    font-weight: 100;
    word-wrap: break-word;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.like {
    width: 100px;
    height: 50px;
    background-color: #f7cb1e;
    position: absolute;
    top: 0px;
    right: -100px;
    float: left;
    box-shadow: #242424 3px 3px 10px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
}
.noOflikes {
    height: 50px;
    width: 50px;
    color: black;
    font-family: 'Gochi Hand', cursive;
    font-size: 1.7em;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
}
.like > img {
    margin: 9px;
    opacity: 0.8;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
.like > img:hover {
    opacity: 1;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
.footer > img:first-child {
    margin-left: 20px;
}
.footer > img:last-child {
    opacity: 0;
    position: absolute;
    left: 2px;
    top: -23px;
}
.footer > img {
    opacity: 0.8;
    margin-top: 9px;
    margin-bottom: 9px;
    margin-left: 6px;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
.footer > img:hover {
    opacity: 1;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}

html {
    height: 100%;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}
body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 1px;
    overflow-x: hidden;
}
#canvas {
    height: auto;
    width: calc(100% - 2px);
    margin-left: 147px;
    position: relative;
}
#closeBtn {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 10px;
    cursor: pointer;
}
#closeBtn:hover {
    -webkit-filter: invert(50%);
}
#tile_details {
    top: 0px;
    left: 146px;
    /*opacity: 0.98;*/
    font-family: Calibri;
    background-color: #e1e1e1;
    height: 100%;
    width: calc(100% - 146px);
    position: fixed;
    -webkit-animation: canvasOverlayAnimation 200ms ease;
}
@-webkit-keyframes canvasOverlayAnimation {
    from {
        opacity: 0;
        -webkit-transform: translate(600px);
    }
    to {
        opacity: 0.98;
        -webkit-transform: translate(0px);
    }
}
#tile_details_main_img {
    width: 100%;
    height: 250px;
    background: url("imgs/img7.jpg");
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
}
#tile_details_main_img_overlay {
    width: 100%;
    height: 250px;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0.5) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
}
#tile_details_main_title {
    padding: 5px;
    color: white;
    font-family: Calibri;
    font-size: 1em;
    font-weight: 900;
    left: 15px;
    position: absolute;
    bottom: 120px;
}
#tile_details_main_subtitle {
    color: white;
    font-family: Dotum;
    font-size: 2.2em;
    line-height: 0.9em;
    left: 15px;
    position: absolute;
    bottom: 75px;
}
#tile_details_main_author {
    color: white;
    font-family: SWScrpc;
    font-size: 1.1em;
    right: 15px;
    position: absolute;
    bottom: 10px;
    text-align: right;
    cursor: pointer;
}
#tile_details_main_author:hover {
    text-decoration: underline;
}
#tile_details_main_content {
    width: auto;
    color: black;
    font-family: Calibri;
    font-size: 0.9em;
    line-height: 1.3em;
    top: 250px;
    margin: 15px;
    position: relative;
    text-align: justify;
}
@-webkit-keyframes registrationAnimation {
    from {
        opacity: 0.7;
        -webkit-transform: translate(-250px);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0px);
    }
}
.registracija_form_anim_in {
    -webkit-animation: registrationAnimation 700ms ease forwards;
}
.registracija_form_anim_out {
    -webkit-animation: registrationAnimation 700ms ease backwards reverse;
}
#registracija_form {
    width: 250px;
    height: 100%;
    position: fixed;
    left: 146px;
    top: 0px;
    background-color: #202020;
    background-image: url("img/stripe.png");
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    text-align: center;
    display: none;
    box-shadow: #000 3px 3px 10px inset;
}
#registracija_form > input {
    width: calc(100% - 70px);
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 2px;
    position: relative;
    border-radius: 3px;
    border: none;
    padding: 4px;
    box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.5);
}
#registracija_form > h6 {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.0em;
    text-align: center;
}
#registracija_form > p {
    text-align: left;
    margin-left: 40px;
    margin-top: 2px;
    margin-bottom: 4px;
    color: #bfbfbf;
}
#registracija_form > input[type="button"] {
    outline: none;
    width: 130px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.9em;
    background-color: transparent;
    border: solid 2px white;
    border-radius: 3px;
    opacity: 0.8;
    padding: 6px;
}
#registracija_form > input[type="button"]:last-child {
    margin-top: 10px;
}
#registracija_form > input[type="button"]:hover {
    opacity: 1.0;
}
#registracija_form_slika {
    width: 120px;
    height: 145px;
    border: solid white 1px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #393939;
    border-radius: 5px;
}
#registracija_form > table {
    width: 100%;
    margin: auto;
    position: relative;
}
#registracija_form > table tr td {
    text-align: center;
}
#leftNavMenu {
    height: calc(100% + 2px);
    width: 149px;
    margin: 0px;
    background: url("cloud_by_avrt-d4azyvm.png");
    background-color: #101010;
    color: white;
    font-family: Calibri;
    position: fixed;
    top: -2px;
    left: -2px;
    text-align: center;
    /*background: 
radial-gradient(circle, transparent 20%, #101010 20%, #101010 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, #101010 20%, #101010 80%, transparent 80%, transparent) 10px 10px,
linear-gradient(#202020 2px, transparent 2px) 0 -1px,
linear-gradient(90deg, #202020 2px, transparent 2px) -1px 0;
background-color: #101010;
background-size:20px 20px, 20px 20px, 10px 10px, 10px 10px;*/
}
#leftNavMenu > ul {
    list-style-type: none;
    position: relative;
    margin-top: 40px;
    padding: 0px;
}
#leftNavMenu > ul > li > .navMenuItem:hover {
    background-color: #00ccff;
    padding: 5px;
    padding-left: 30px;
    width: calc(100% - 35px);
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
#logMessage {
    color: red;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.75em;
    text-align: center;
}
#leftNavMenu > input[type="text"] {
    margin-top: 50px;
}
#leftNavMenu > input[type="text"], [type="password"] {
    width: calc(100% - 35px);
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 2px;
    position: relative;
    border-radius: 3px;
    border: none;
    padding: 4px;
    box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.5);
}
#leftNavMenu > input[type="button"] {
    outline: none;
    width: 100px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    background-color: transparent;
    border: solid 2px #101010;
    border-radius: 3px;
    opacity: 0.8;
    padding: 6px;
}
#leftNavMenu > input[type="button"]:hover {
    opacity: 1;
    border: solid 2px white;
}
#leftNavMenu > input[type="button"]#registracija {
    margin-top: 10px;
    border: solid 2px white;
}
.navMenuItem {
    width: 80%;
    height: 16px;
    margin: 15px 0px 0px 0px;
    position: relative;
    opacity: 0.8;
    cursor: pointer;
    padding: 5px;
    padding-left: 15px;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
.navMenuItem > img {
    float: left;
}
.navMenuItem > a {
    height: 16px;
    color: white;
    margin-left: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.7em;
    line-height: 16px;
    text-decoration: none;
    position: relative;
    float: left;
}
.navMenuItem:hover {
    opacity: 1;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
#logoContainer {
    cursor: pointer;
}
#logo {
    width: 34px;
    height: 34px;
    background-color: white;
    position: relative;
    margin-top: 25px;
    margin-left: 15px;
    float: left;
}
#logo_text {
    color: white;
    font-family: Century Gothic;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    text-align: left;
    margin-top: 22px;
    margin-left: 1px;
    float: left;
}
#pretraga {
    opacity: 1;
    margin-top: 70px;
}
#pretraga > img {
    background-color: #00ccff;
    position: absolute;
    right: 0px;
    top: 5px;
    padding: 4px;
    border-radius: 0px 4px 4px 0px;
}
#pretraga > input[type="text"] {
    width: calc(100% - 5px);
    height: 16px;
    border-radius: 3px;
    border: none;
    padding: 4px;
    box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.5);
    outline: none;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
#pretraga:hover > img{
    background-color: #66cc00;
    -webkit-transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    transition: all 100ms ease;
}
#footerContent {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 0.5em;
    text-align: center;
    line-height: 15px;
    opacity: 0.5;
    padding-bottom: 5px;
}
#footerContent > a {
    text-decoration: none;
    color: white;
}

.windows8 {
    position: relative;
    width: 90px;
    height:90px;
    margin-left: auto;
    margin-right: auto;
}
.windows8 .wBall {
    position: absolute;
    width: 86px;
    height: 86px;
    opacity: 0;
    -moz-transform: rotate(225deg);
    -moz-animation: orbit 4.95s infinite;
    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 4.95s infinite;
    -ms-transform: rotate(225deg);
    -ms-animation: orbit 4.95s infinite;
    -o-transform: rotate(225deg);
    -o-animation: orbit 4.95s infinite;
    transform: rotate(225deg);
    animation: orbit 4.95s infinite;
}
.windows8 .wBall .wInnerBall{
    position: absolute;
    width: 11px;
    height: 11px;
    background: #101010;
    left:0px;
    top:0px;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
}
.windows8 #wBall_1 {
    -moz-animation-delay: 1.08s;
    -webkit-animation-delay: 1.08s;
    -ms-animation-delay: 1.08s;
    -o-animation-delay: 1.08s;
    animation-delay: 1.08s;
}
.windows8 #wBall_2 {
    -moz-animation-delay: 0.22s;
    -webkit-animation-delay: 0.22s;
    -ms-animation-delay: 0.22s;
    -o-animation-delay: 0.22s;
    animation-delay: 0.22s;
}
.windows8 #wBall_3 {
    -moz-animation-delay: 0.43s;
    -webkit-animation-delay: 0.43s;
    -ms-animation-delay: 0.43s;
    -o-animation-delay: 0.43s;
    animation-delay: 0.43s;
}
.windows8 #wBall_4 {
    -moz-animation-delay: 0.65s;
    -webkit-animation-delay: 0.65s;
    -ms-animation-delay: 0.65s;
    -o-animation-delay: 0.65s;
    animation-delay: 0.65s;
}
.windows8 #wBall_5 {
    -moz-animation-delay: 0.86s;
    -webkit-animation-delay: 0.86s;
    -ms-animation-delay: 0.86s;
    -o-animation-delay: 0.86s;
    animation-delay: 0.86s;
}
@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin:0%;
    }

    30% {
        opacity: 1;
        -moz-transform:rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin:7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin:30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:70%;
    }

    76% {
        opacity: 0;
        -moz-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }

}
@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:0%;
    }

    30% {
        opacity: 1;
        -webkit-transform:rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin:7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:70%;
    }

    76% {
        opacity: 0;
        -webkit-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

}
@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin:0%;
    }

    30% {
        opacity: 1;
        -ms-transform:rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin:7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin:30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:70%;
    }

    76% {
        opacity: 0;
        -ms-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }

}
@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin:0%;
    }

    30% {
        opacity: 1;
        -o-transform:rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin:7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin:30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin:39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin:70%;
    }

    76% {
        opacity: 0;
        -o-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }

}
@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin:0%;
    }

    30% {
        opacity: 1;
        transform:rotate(410deg);
        animation-timing-function: ease-in-out;
        origin:7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin:30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin:39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin:70%;
    }

    76% {
        opacity: 0;
        transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }

}
</style>
<script type="text/javascript">

window.addEventListener("resize", resInit);
window.addEventListener("load", init);

function timer()
{
    var end = new Date('01/20/2015 00:00 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById("0").children[1].children[1].innerText = "Još " + days + ":";
        document.getElementById("0").children[1].children[1].innerText += hours + ":";
        document.getElementById("0").children[1].children[1].innerText += minutes + ":";
        document.getElementById("0").children[1].children[1].innerText += seconds;
    }

    timer = setInterval(showRemaining, 1000);
}

function init()
{
    timer();    //Tajmer
    createNavMenu();
    fillAsync();

    var loginBtn = document.getElementById("login");
    loginBtn.onclick = login;

    var regBtn = document.getElementById("registracija");
    regBtn.onclick = registration;

    var password = document.getElementById("password");
    password.onkeypress = function (e)
    {
        if (e.keyCode == 13)
            login();
    };

    var goBack = document.getElementById("odustani");
    goBack.onclick = getBack;

    var registrujSeBtn = document.getElementById("registruj_se");
    registrujSeBtn.onclick = sendRegistration;

    var search = document.getElementById("search");
    search.onclick = searchSend;

    var txtSearch = document.getElementById("txtPretraga");
    txtSearch.onkeypress = function (e)
    {
        if (e.keyCode == 13)
            searchSend();
    };


}

function resInit()
{
    fillAsync();
}

function createNavMenu()
{
    var navMenuList = document.getElementById("navMenuList");

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsonArray = JSON.parse(xmlhttp.responseText);

            for (var i = 0; i < jsonArray.length; i++)
            {
                var id = jsonArray[i].id;
                var iconPath = jsonArray[i].img_url;
                var text = jsonArray[i].naziv;
                var clr = jsonArray[i].boja;

                var listItem = createNavMenuItem(id, iconPath, text, clr);
                navMenuList.appendChild(listItem);
            }
        }
    }

    xmlhttp.open("GET", "http://www.balkanreporter.rs/public/vesti/kategorije", true);
    xmlhttp.send();
}

function createNavMenuItem(id, iconPath, text, color)
{
    var listItem = document.createElement("li");

    var div = document.createElement("div");
    div.id = id;
    div.className = "navMenuItem";
    div.onmouseenter = function () { div.style.backgroundColor = color; };
    div.onmouseleave = function () { div.style.backgroundColor = "transparent";};

    var image = document.createElement("img");
    image.src = iconPath;

    var link = document.createElement("a");
    link.innerHTML = text;

    div.appendChild(image);
    div.appendChild(link);

    listItem.appendChild(div);

    return listItem;
}

function fillAsync()
{
    var canvas = document.getElementById("canvas");
    canvas.innerHTML = "";

    var tiles = new Array();

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function ()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var jsonArray = JSON.parse(xmlhttp.responseText);



            for (var i = 0; i < jsonArray.length; i++)
            {
                var size = "";
                if (jsonArray[i].dim_h == 1 && jsonArray[i].dim_v == 1)
                    size = "S";
                else if (jsonArray[i].dim_h == 2 && jsonArray[i].dim_v == 1)
                    size = "M";
                else
                    size = "L";
                tiles[i] = createTile(jsonArray[i].id, size, jsonArray[i].likes_num, jsonArray[i].img_url, jsonArray[i].boja, jsonArray[i].naslov, jsonArray[i].podnaslov, jsonArray[i].opis, jsonArray[i].tip);
            }

            //------------------------Tajmer---------------------------------

            tiles[jsonArray.length] = createTile(0,"M",null,"img/timer.jpg","#red","Početak rada","","","baner");

            //---------------------------------------------------------------

            var j = 0;

            var timer = setInterval(function () {
                canvas.appendChild(tiles[j]);
                j++;
                if (j >= tiles.length)
                    clearInterval(timer);
            }, 15);

        }
    }
    xmlhttp.open("GET", "http://www.balkanreporter.rs/public/kategorije/aktuelno", true);
    xmlhttp.send();
}

function createTile(id, size, likes_num, imagePath, color, titleText, subtitleText, contentText, type)
{
    var tile = document.createElement("div");
    tile.className = "tile";
    tile.style.backgroundImage = "url('" + imagePath + "')";
    var calculatedWidth = (window.innerWidth - 166) / Math.round((window.innerWidth - 166) / 300);
    tile.id = id;

    tile.onclick = function ()
    {
        createTileDetails(id);
    };

    var overlay = document.createElement("div");
    overlay.className = "overlay";

    var like = document.createElement("div");
    like.className = "like";

    var likeButton = document.createElement("img");
    likeButton.src = "img/like-variation.png";
    likeButton.onclick = function () { alert("Like" + tile.id); };

    var noOflikes = document.createElement("div");
    noOflikes.className = "noOflikes";
    if(likes_num==null)
        noOflikes.innerHTML = "0";
    else
        noOflikes.innerHTML = likes_num;

    var title = document.createElement("div");
    title.className = "title";
    if(titleText==null)
        title.innerText="";
    else
        title.innerText = titleText.toString().toUpperCase();

    tile.onmouseover = function () { title.style.backgroundColor = color; };
    tile.onmouseout = function () { title.style.backgroundColor = "transparent"; };

    var subtitle = document.createElement("div");
    subtitle.className = "subtitle";
    if(subtitleText==null)
        subtitle.innerText = ""
    else
        subtitle.innerText = subtitleText;

    var content = document.createElement("div");
    content.className = "content";
    if(contentText=="" || contentText==null)
        content.innerText = "\n"
    else
        content.innerText = contentText;

    var textWraper = document.createElement("div");
    textWraper.className = "textWraper";
    textWraper.appendChild(title);
    textWraper.appendChild(subtitle);
    textWraper.appendChild(content);

    var footer = document.createElement("div");
    footer.className = "footer";

    var facebookButton = document.createElement("img");
    facebookButton.src = "img/facebook-variation.png";

    var twitterButton = document.createElement("img");
    twitterButton.src = "img/twitter-variation-old.png";

    var gplusButton = document.createElement("img");
    gplusButton.src = "img/gplus-variation2.png";

    var youtubeButton = document.createElement("img");
    youtubeButton.src = "img/youtube-variation.png";

    var cut = document.createElement("img");
    cut.src = "img/scissors-24.png";

    switch (size) {
        case "S":
            tile.style.width = calculatedWidth - 2 + "px";
            tile.style.height = calculatedWidth - 2 + "px";
            subtitle.style.fontSize = "1.6em";
            content.style.fontSize = "0.7em"
            break;
        case "M":
            tile.style.width = (calculatedWidth * 2) - 2 + "px";
            tile.style.height = calculatedWidth - 2 + "px";
            //title.style.bottom = "120px";
            break;
        case "L":
            tile.style.width = (calculatedWidth * 2) - 3 + "px";
            tile.style.height = (calculatedWidth * 2) - 3 + "px";
            //title.style.bottom = "120px";
            break;
    }

    tile.appendChild(overlay);
    if(type!="baner")
    {
        tile.appendChild(like);
    }
    tile.appendChild(textWraper);
    tile.appendChild(footer);

    like.appendChild(likeButton);
    like.appendChild(noOflikes);

    footer.appendChild(facebookButton);
    footer.appendChild(twitterButton);
    footer.appendChild(gplusButton);
    footer.appendChild(youtubeButton);
    footer.appendChild(cut);

    return tile;
}

function createTileDetails(id)
{

    var formData = new FormData();
    formData.append("id", id);

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsonObject = JSON.parse(xmlhttp.responseText);

            var tileDetails = document.createElement("div");
            tileDetails.id = "tile_details";

            var closeBtn = document.createElement("img");
            closeBtn.src = "img/x-mark-4-24.png";
            closeBtn.id = "closeBtn";
            closeBtn.onclick = function () { document.body.removeChild(tileDetails); };

            var like = document.createElement("div");
            like.className = "like";
            like.style.right = "0px";

            var likeButton = document.createElement("img");
            likeButton.src = "img/like-variation.png";
            likeButton.onclick = function () { alert("Like " + tile.id); };

            var noOflikes = document.createElement("div");
            noOflikes.className = "noOflikes";
            noOflikes.innerHTML = jsonObject.likes_num;

            var footer = document.createElement("div");
            footer.className = "footer";
            footer.style.bottom = "0px";

            var facebookButton = document.createElement("img");
            facebookButton.src = "img/facebook-variation.png";

            var twitterButton = document.createElement("img");
            twitterButton.src = "img/twitter-variation-old.png";

            var gplusButton = document.createElement("img");
            gplusButton.src = "img/gplus-variation2.png";

            var youtubeButton = document.createElement("img");
            youtubeButton.src = "img/youtube-variation.png";

            var cut = document.createElement("img");
            cut.src = "img/scissors-24.png";
            cut.style.opacity = "1";

            footer.appendChild(facebookButton);
            footer.appendChild(twitterButton);
            footer.appendChild(gplusButton);
            footer.appendChild(youtubeButton);
            footer.appendChild(cut);

            var image = document.createElement("div");
            image.id = "tile_details_main_img";
            image.style.backgroundImage = "url('" + jsonObject.img_url + "')";

            var imageOverlay = document.createElement("div");
            imageOverlay.id = "tile_details_main_img_overlay";

            var title = document.createElement("div");
            title.id = "tile_details_main_title";
            title.style.backgroundColor = jsonObject.boja;
            title.innerHTML = jsonObject.naslov;

            var subtitle = document.createElement("div");
            subtitle.id = "tile_details_main_subtitle";
            subtitle.innerHTML = jsonObject.podnaslov;

            var author = document.createElement("div");
            author.id = "tile_details_main_author";
            author.innerHTML = jsonObject.autor;

            imageOverlay.appendChild(title);
            imageOverlay.appendChild(subtitle);
            imageOverlay.appendChild(like);
            imageOverlay.appendChild(footer);
            imageOverlay.appendChild(author);

            var content = document.createElement("div");
            content.id = "tile_details_main_content";
            content.innerHTML = jsonObject.sadrzaj;

            like.appendChild(likeButton);
            like.appendChild(noOflikes);

            tileDetails.appendChild(image);
            tileDetails.appendChild(imageOverlay);
            tileDetails.appendChild(closeBtn);
            tileDetails.appendChild(content);

            document.body.appendChild(tileDetails);
        }
    }

    //xmlhttp.open("GET", "http://localhost/laravel/public/post/" + id, true);
    xmlhttp.open("GET", "http://www.balkanreporter.rs/public/post/" + id, true);
    xmlhttp.send();
}

function login()
{
    var logMsg = document.getElementById("logMessage");

    var username = document.getElementById("username");
    var password=document.getElementById("password");

    var btnLogin = document.getElementById("login");
    var btnReg = document.getElementById("registracija");

    if (username.value.length == 0 || password.value.length == 0)
    {
        logMsg.innerHTML = "Niste uneli potrebne podatke!";
        return;
    }

    var formData = new FormData();
    formData.append("username", username.value);
    formData.append("password", password.value);

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function ()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var jsonObject = JSON.parse(xmlhttp.responseText);
            if (jsonObject.id != -1) {
                logMsg.style.color = "white";
                logMsg.style.fontWeight = "300";
                logMsg.innerHTML = "Prijavljeni ste kao:<br/>" + jsonObject.ime + " " + jsonObject.prezime;
                username.style.display = "none";
                password.style.display = "none";
                btnLogin.value = "Odjavi se";
                btnLogin.onclick = function () { logout(); };
                btnReg.style.display = "none";
            }
            else {
                logMsg.innerHTML = "Neuspešna prijava!";
                var timer = setInterval(function () {
                    logMsg.innerHTML = "";
                    clearInterval(timer);
                }, 3500);
            }
        }
    }
    xmlhttp.open("POST", "http://www.balkanreporter.rs/public/korisnik/login", true);
    xmlhttp.send(formData);
}

function logout()
{
    var logMsg = document.getElementById("logMessage");

    var username = document.getElementById("username");
    var password = document.getElementById("password");

    var btnLogin = document.getElementById("login");
    var btnReg = document.getElementById("registracija");

    logMsg.style.color = "red";
    logMsg.style.fontWeight = "400";
    logMsg.innerHTML = "";
    username.style.display = "block";
    password.style.display = "Block";
    password.value = "";
    btnLogin.value = "Prijavi se";
    btnLogin.onclick = function () { login(); };
    btnReg.style.display = "block";
}

function registration()
{
    var registracija = document.getElementById("registracija_form");
    registracija.className = "";
    registracija.classList.add("registracija_form_anim_in");
    registracija.style.display = "block";
}

function searchSend()
{
    var searchString = document.getElementById("txtPretraga").value;
    if (searchString.length > 0)
        alert("Trenutno nije dostupno!");
}

function sendRegistration()
{
    alert("Trenutno nije dostupno!");
}

function getBack()
{
    var registracija = document.getElementById("registracija_form");
    registracija.className = "";
    registracija.classList.add("registracija_form_anim_out");
    registracija.style.display = "none";
}

</script>
</head>
<body>
<div id="canvas"></div>
<div id="registracija_form">
    <h6>Registracija novog korisnika</h6>
    <div id="registracija_form_slika"></div>
    <p>* opciono</p>
    <input type="text" placeholder="ime" />
    <p>* opciono</p>
    <input type="text" placeholder="prezime" />
    <p>* opciono</p>
    <input type="text" placeholder="adresa" />
    <p>* opciono</p>
    <input type="tel" placeholder="broj telefona" />
    <p style="color: red">* obavezno</p>
    <input type="email" placeholder="e-mail" />
    <p style="color: red">* obavezno</p>
    <input type="text" placeholder="korisničko ime" />
    <p style="color: red">* obavezno</p>
    <input type="password" placeholder="lozinka" />
    <p style="color: red">* obavezno</p>
    <input type="password" placeholder="ponovljena lozinka" />
    <input id="registruj_se" type="button" value="Registruj se" />
    <input id="odustani" type="button" value="Odustani" />
</div>
<!--<div class="windows8">
    <div class="wBall" id="wBall_1">
        <div class="wInnerBall">
        </div>
    </div>
    <div class="wBall" id="wBall_2">
        <div class="wInnerBall">
        </div>
    </div>
    <div class="wBall" id="wBall_3">
        <div class="wInnerBall">
        </div>
    </div>
    <div class="wBall" id="wBall_4">
        <div class="wInnerBall">
        </div>
    </div>
    <div class="wBall" id="wBall_5">
        <div class="wInnerBall">
        </div>
    </div>
</div>-->
<div id="leftNavMenu">
    <div id="logoContainer"><div id="logo"></div><div id="logo_text">Balkan<br />Reporter</div></div>
    <div class="navMenuItem" id="pretraga"><input id="txtPretraga" type="text" placeholder="pretraga..." spellcheck="false" /><img id="search" src="img/icon_search.png" /></div>
    <ul id="navMenuList"></ul>
    <input id="username" type="text" placeholder="korisničko ime" spellcheck="false" />
    <input id="password" type="password" placeholder="lozinka" spellcheck="false" />
    <input id="login" type="button" value="Prijavi se" />
    <input id="registracija" type="button" value="Registracija" />
    <p id="logMessage"></p>
    <div id="footerContent"><a href="www.google.com">Pomoć</a> | <a href="www.google.com">Mapa sajta</a> | <a href="www.google.com">Uslovi korišćenja</a><br />Sva prava zadržana BalkanReporter©</div>
</div>
</body>
</html>